<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*--鎸夐挳1--*/
        .container1 {
            width:200px;
            display:block;
            margin:20px auto;
            position:relative;
            font-family:droid arabic kufi;
        }

        .con_down1 {
            display:block;
            cursor:pointer;
            background-color:#F6EB96;
            width:190px;
            height:50px;
            padding-left:10px;
            padding-top:5px;
            text-align:left;
            border-bottom:4px solid #D8B83C;
            border-radius:5px;
            position:relative;
            line-height:50px;
        }
        .con_down1 .fa-download{
            position:absolute;
            right:10px;
            top:15px;color:#895D0A;
        }

        .con_down1 h4 {
            color:#895D0A;
            text-transform:uppercase;
            margin:0;
        }
        .sizes1 h5 {
            margin:0;
        }

        .sizes1 {
            background-color:#E3E3E3;
            width:100px;
            height:30px;
            z-index:-9;
            padding-top:2px;
            border-bottom:4px solid #AAA9A9;
            position:absolute;
            top:13px;
            left:20px;
            transition:.5s all ease-in-out;
        }

        .size {
            line-height:30px;
            text-align:center;
            color:#4B4B4B;
        }

        .sizes_abs1 {
            background-color:#F6EB96;
            cursor:pointer;
            width:20px;
            border-bottom:4px solid #D8B83C;
            border-bottom-left-radius:5px;
            border-top-left-radius:5px;
            height:55px;
            position:absolute;
            top:-13px;
            left:-20px;
            z-index:2;

        }

        .container1:hover .sizes1 {
            left:-100px;
        }

        .container1:hover .con_down1 {
            background-color:#F1DD5E;
            border-bottom-left-radius:0;
            border-top-left-radius:0;
        }

        .container1:hover .sizes_abs1 {
            background-color:#F1DD5E;
        }


        /*--鎸夐挳2--*/
        .container2 {
            width:200px;
            display:block;
            margin:20px auto;
            position:relative;
            font-family:droid arabic kufi;
        }
        .con_down2 {
            display:block;
            cursor:pointer;
            background-color:#F6EB96;
            width:190px;
            height:50px;
            padding-left:10px;
            padding-top:5px;
            text-align:left;
            border-bottom:4px solid #D8B83C;
            border-radius:5px;
            position:relative;
            line-height:50px;
            transition:.5s all ease-in-out;
        }
        .con_down2 .fa-download {
            position:absolute;
            right:10px;
            top:15px;
            color:#895D0A;
        }
        .con_down2 h4 {
            color:#895D0A;
            text-transform:uppercase;
            margin:0;
        }
        .sizes2 h5 {
            margin:0;
        }
        .sizes2 {
            background-color:#E3E3E3;
            width:100px;
            height:30px;
            z-index:-9;
            position:absolute;
            bottom:22px;
            right:50%;
            margin-right:-50px;
            transition:.5s all ease-in-out;
        }
        .size {
            line-height:30px;
            text-align:center;
            color:#4B4B4B;
        }
        .sizes_abs2 {
            background-color:#F6EB96;
            cursor:pointer;
            width:200px;
            border-bottom:4px solid #D8B83C;
            border-bottom-left-radius:5px;
            border-bottom-right-radius:5px;
            height:20px;
            position:absolute;
            left:-50px;
            bottom:-22px;
            z-index:2;
        }
        .container2:hover .sizes2 {
            bottom:-30px;
        }
        .container2:hover .con_down2 {
            background-color:#F1DD5E;
            border-bottom:0;
            border-bottom-left-radius:0;
            border-bottom-right-radius:0;
        }
        .container2:hover .sizes_abs2 {
            background-color:#F1DD5E;
        }
    </style>
</head>
<body>
<div class="container1">
    <div class="con_down1">
        <i class="fa fa-download fa-2x"></i>
        <h4>Download Now</h4>
    </div>
    <div class="con_sizes1">
        <div class="sizes1">
            <h5 class="size1">34.5 MB</h5>
            <div class="sizes_abs1"></div>
        </div>
    </div>
</div>
<div class="container2">
    <div class="con_down2">
        <i class="fa fa-download fa-2x"></i>
        <h4>Download now</h4>
    </div>
    <div class="con_sizes2">
        <div class="sizes2">
            <h5 class="size2">34.5 MB</h5>
            <div class="sizes_abs2"></div>
        </div>
    </div>
</div>
</body>
</html>